<template>
  <j-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
    @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户名称">
          <a-input placeholder="请输入客户名称" disabled v-decorator="['name', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="跟进状态">
          <j-dict-select-tag disabled v-decorator="['origin', {}]" title="跟进状态" :triggerChange=true dictCode="cusFollowup"
            placeholder="请选择跟进状态" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来源">
          <j-dict-select-tag disabled v-decorator="['origin', {}]" title="来源" :triggerChange=true dictCode="cusOrigin"
            placeholder="请选择来源" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户类型">
          <j-dict-select-tag disabled v-decorator="['type', {}]" title="客户类型" :triggerChange=true dictCode="cusType"
            placeholder="请选择客户类型" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户等级">
          <j-dict-select-tag ref="levelHtml" disabled v-decorator="['level', {}]" title="客户等级" :triggerChange=true dictCode="cusLevel"
          placeholder="请选择客户等级" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号">
          <a-input placeholder="请输入手机号" disabled v-decorator="['mobile',{
            rules: [
              { required: true, message: '请输入手机号码!' },
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
              ]},]"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话(座机)">
          <a-input placeholder="请输入电话(座机)" disabled v-decorator="['telephone', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="微信">
          <a-input placeholder="请输入微信" disabled v-decorator="['wx', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="邮箱">
          <a-input placeholder="请输入邮箱" disabled v-decorator="['email', { 
            rules: [{type: 'email', message: '请输入邮箱!',}]
          }]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="区域">
          <j-area-linkage disabled v-decorator="['province', {}]" type="cascader" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="详细地址">
          <a-input placeholder="请输入详细地址" disabled v-decorator="['address', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="跟进人">
          <j-dict-select-tag disabled v-decorator="['ownerUserId', {}]" placeholder="请选择用户" :triggerChange="true"
           dictCode="sys_user,realname,id,sales=1 order by create_time"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
           <a-textarea aria-placeholder="请输入备注" disabled v-decorator="['remark', {}]"></a-textarea>
        </a-form-item>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import {
    httpAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import CAreaLinkage from '../../comp/CAreaLinkage'

  export default {
    name: "CusLook",
    components: {
      JDictSelectTag,
      JAreaLinkage,
      CAreaLinkage,
    },
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        url: {
          add: "/crm/cus/add",
          edit: "/crm/cus/edit",
        },
      }
    },
    created() {
   
    },
    watch:{
      
    },
    mounted(){
     this.$nextTick(res=>{
       console.log(this.$refs);
       // this.$refs.levelHtml.dictOptions=this.$refs.levelHtml.dictOptions.filter(item=>{
       //   return item.value<=2;
       // })
     })
    },
    methods: {
      look(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'name', 'level','followup', 'origin', 'type', 'province', 'city','wx',
           'mobile', 'telephone', 'email', 'remark',
            'createId', 'ownerUserId', 'address',  'detailAddress', 'status','ownerUserId'))
         
        });

      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        that.close();
      },
      handleCancel() {
        this.close()
      },
      

    }
  }
</script>

<style lang="less" scoped>

</style>
